<template>
<div>
    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
    </el-breadcrumb>
 <el-card class="box-card">

      <!-- 2.1定义一行 使用栅格-->
      <el-row :gutter="20">
        <el-col :span="1">
          <el-button type="primary" @click="dialogVisible=true">新增奖惩人员</el-button>
        </el-col>
      </el-row>

     <el-table :data="rewardList" height="250" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="department" label="部门" width="180">
      </el-table-column>
      <el-table-column prop="position" label="职位">
      </el-table-column>
      <el-table-column prop="way" label="奖惩方式">
      </el-table-column>
      <el-table-column prop="cause" label="奖惩原因">
      </el-table-column>
      <el-table-column prop="date" label="发表日期">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteReward(scope.row)"></el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 定义分页组件 关于分页插件的属性说明
          1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
          2.@current-change 当页数发生改变时,触发该函数
          3.current-page 当前选中的页
          4.page-sizes   页面数据展现的选项
          5.page-size    默认选中的页数
          6.layout    分页中展现的数据种类
          7.total     记录总数
     -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
  </el-card >
      <!-- 编辑用户新增对话框 visible.sync 控制对话框的显示-->
   <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="closeDialog" >
 <!-- 定义用户提交表单数据-->
     <el-form :model="addRewardModel" :rules="rules" ref="addRewardRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addRewardModel.name"></el-input>
        </el-form-item>


  <el-form-item label="部门" prop="department" >
    <el-select v-model="addRewardModel.department" placeholder="请选择" style="width:100% ;">
      <el-option label="JAVA开发部" value="1"></el-option>
      <el-option label="web开发部" value="2"></el-option>
    </el-select>
  </el-form-item>

       <el-form-item label="职位" prop="position" >
          <el-select v-model="addRewardModel.position" placeholder="请选择" style="width:100% ;">
            <el-option label="项目经理" value="1"></el-option>
            <el-option label="总监" value="2"></el-option>
            <el-option label="程序员" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="奖惩方式" prop="way">
          <el-input v-model="addRewardModel.way"></el-input>
        </el-form-item>
       <el-form-item label="奖惩原因" prop="cause">
          <el-input v-model="addRewardModel.cause"></el-input>
        </el-form-item>
        <el-form-item label="发表日期" prop="date">
          <el-input  type="date" v-model="addRewardModel.date"  :disabled="true"></el-input>
        </el-form-item>

       </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRewardBtn">确 定</el-button>
        </span>
        </el-dialog>


  </div>

</template>

<script>
export default{
  data(){
    return{
    queryInfo: {
          query: '',
          pageNum: 1,
          pageSize: 5
        },
        total:0,
      rewardList: [],
      dialogVisible: false,
      addRewardModel:{
        name: '',
        department: '',
        position: '',
        way: '',
        cause: '',
        date: ''
      },
      //2.定义分页对象
      queryItemInfo: {
        query: '', //定义查询参数
        pageNum: 1,
        pageSize: 10
      },
      rules:{
        name:[{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        },
        {
          main: 2,
          max:5,
          message: '长度在2到5割字符',
          trigeer: 'blur'
        }],
        department:[{
          required: true,
          message: '请选择部门',
          trigger: 'change' }],

         position:[{
            required: true,
            message: '请选择职位',
            trigger: 'change' }],

         way:[{
              required: true,
              message: '请输入奖惩方式',
              trigger: 'blur'
            },
            {
              main: 1,
              max:50,
              message: '长度在1到50割字符',
              trigeer: 'blur'
            }],

        cause:[{
              required: true,
              message: '请输入奖惩方式',
              trigger: 'blur'
            },
            {
              main: 1,
              max:50,
              message: '长度在1到50割字符',
              trigeer: 'blur'
            }],
         date: [{
              required: true,
              message: '奖罚时间',
              trigger: 'blur'
            }],

      }

    }
  },
  methods: {
    async getRewardList(){
      const {
        data: result
        }=await this.$http.get("/reward/getFind",{

         params: this.queryInfo
      })
        if(result.status!==200)return this.$message.error("商品列表查询失败")
        this.rewardList=result.data.rows

        this.total=result.data.total

        console.log("总记录数"+this.total)


      },
      async deleteReward(reward) {
        //1.消息确认框
        const result = await this.$confirm('此操作将永久删除 ' + reward.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => error)

        //如果确认  confirm  如果取消 cancel
        if (result !== 'confirm') {
          return this.$message.info("删除取消")
        }
        const {
          data: result2
        } = await this.$http.delete(`/reward/aa/${reward.id}`)
        if (result2.status !== 200) return this.$message.error("删除失败")
        this.$message.success("删除成功")
        //重新加载 数据
        this.getRewardList()
      },
      handleSizeChange(pageSize) {
        //console.log("每页展现的条数"+pageSize)
        this.queryInfo.pageSize = pageSize
        this.getRewardList()
      },
      handleCurrentChange(pageNum) {
        //console.log("页数:"+pageNum)
        this.queryInfo.pageNum = pageNum
        this.getRewardList()
      },
      closeDialog() {
        //重置表格数据
        this.$refs.addRewardRef.resetFields()

      },
      // async addRewardBtn(){
     addRewardBtn(){
        // this.$refs.addRewardBtn.validate(async valid => {
        //   if(!valid) return
        //   const{
        //     data: result
        //   }=await this.$http.post('/reward/addReward',this.addRewardModel)
        //    console.log(123)
        //   if(result.status!==200) return this.$message.error("用户新增失败")
        //   this.$message.success("用户新增成功")
        //   this.dialogVisible=false
        //   this.getRewardList()
        // })

        this.$http.post('/reward/addReward',this.addRewardModel).then(
         res=>{})
          // if(result!==200) this.$message.error("失败了")
         this.$message.success("添加成功")

         this.getRewardList()
         this.dialogVisible=false


      },



    },
    created() {
      this.getRewardList()
    },


  }

</script>

<style>
</style>
